@fortawesome/fontawesome-free

What is @fortawesome/fontawesome-free?

@fortawesome/fontawesome-free is a popular npm package that provides a comprehensive collection of icons and tools for integrating Font Awesome icons into web projects. It includes both free and pro icons, but the free version offers a wide range of icons suitable for most use cases.

What are @fortawesome/fontawesome-free's main functionalities?

Basic Icon Usage

This feature allows you to easily include Font Awesome icons in your HTML by using the appropriate class names. The example shows how to include a camera icon.

<i class="fas fa-camera"></i>

Icon Styling

You can style Font Awesome icons using CSS. The example demonstrates how to change the color and size of the camera icon.

<i class="fas fa-camera" style="color: red; font-size: 24px;"></i>

Using Icons with React

Font Awesome provides a React component for easier integration with React applications. The example shows how to use the FontAwesomeIcon component to include a camera icon in a React component.

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCamera } from '@fortawesome/free-solid-svg-icons';

function App() {
  return <FontAwesomeIcon icon={faCamera} />;
}

Using Icons with Angular

Font Awesome also provides support for Angular applications. The example shows how to set up and use Font Awesome icons in an Angular component.

import { library } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { faCamera } from '@fortawesome/free-solid-svg-icons';

library.add(faCamera);

@NgModule({
  imports: [
    FontAwesomeModule
  ]
})
export class AppModule { }

@Component({
  selector: 'app-root',
  template: '<fa-icon [icon]="'camera'"></fa-icon>'
})
export class AppComponent { }

Other packages similar to @fortawesome/fontawesome-free

react-icons

react-icons is a popular library that provides a collection of icons from various icon libraries, including Font Awesome, Material Design, and more. It offers a simple way to include icons in React applications and is highly customizable.

material-icons

material-icons is a package that provides Google's Material Design icons. It is a good alternative if you prefer the Material Design aesthetic. It is easy to use and integrates well with web projects.

ionicons

ionicons is a set of high-quality icons designed for use with Ionic Framework, but they can be used in any web project. They offer a modern and clean design, making them a good alternative to Font Awesome.

README

@fortawesome/fontawesome-free - The Official Font Awesome 6 NPM package

"I came here to chew bubblegum and install Font Awesome 6 - and I'm all out of bubblegum"

Installation

$ npm i --save @fortawesome/fontawesome-free

Or

$ yarn add @fortawesome/fontawesome-free

What's included?

This package includes all the same files available through our Free and Pro CDN.

• /js - All JavaScript files associated with Font Awesome 6 SVG with JS
• /css - All CSS using the classic Web Fonts with CSS implementation
• /sprites - SVG icons packaged in a convenient sprite
• /scss, /less - CSS Pre-processor files for Web Fonts with CSS
• /webfonts - Accompanying files for Web Fonts with CSS
• /svg - Individual icon files in SVG format

Documentation

Get started here. Continue your journey here.

Or go straight to the API documentation.

Issues and support

Start with GitHub issues and ping us on Twitter if you need to.